<template>
    <div id="mxl_index">
        <!--选项卡插件-->
        <el-tabs type="border-card">
            <el-tab-pane label="后台首页">
                <!--数据可视化部分-->
                <el-row>
                    <el-col :lg="8" :md="12" :xs="24">
                        <div id="canzhuo" class="chart"></div>
                    </el-col>
                    <el-col :lg="8" :md="12" :xs="24">
                        <div id="gongyingshang" class="chart"></div>
                    </el-col>
                    <el-col :lg="8" :md="12" :xs="24">
                        <div id="shouzhidalei" class="chart"></div>
                    </el-col>
                    <el-col :lg="8" :md="12" :xs="24">
                        <div id="lirun" class="chart"></div>
                    </el-col>
                    <el-col :lg="8" :md="12" :xs="24">
                        <div id="shouru" class="chart"></div>
                    </el-col>
                    <el-col :lg="8" :md="12" :xs="24">
                        <div id="zhichu" class="chart"></div>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
        <!--搜索框部分-->
        <div class="m_search clear">
            <!--月份选择-->
            <div>
                <el-date-picker
                        v-model="checkedMonth"
                        value-format="yyyy-MM"
                        type="month"
                        placeholder="选择年月"
                        :picker-options=pickerOptions
                ></el-date-picker>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import echarts from "echarts";

    export default {
        name: "mxl_index",
        data() {
            return {
                /*月份搜索*/
                checkedMonth: "",
                pickerOptions: {//设置今天之后的时间不可选
                    disabledDate(time) {
                        return time.getTime() > Date.now() - 8.64e6;//如果没有后面的-8.64e6就是不可以选择今天的
                    }
                },
                /*Yapi数据*/
                yapi: [],
                /*数据可视化部分*/
                pageData: {
                    returnMoney: {
                        x: [],
                        y: [],
                    },//月利润
                    monthIn: {
                        x: [],
                        y: [],
                    },//月收入
                    monthOut: {
                        x: [],
                        y: [],
                    },//月支出
                    deskMonthIn: {
                        x: [],
                        y: [],
                    },//每桌收入
                    proMonthOut: {
                        x: [],
                        y: [],
                    },//供应商支出
                    monthType: {
                        x: [],
                        y: [],
                    },//大类收入
                }
            };
        },
        methods: {
            /*数据可视化插件（dom,data,title）*/
            drawLine(dom, data, title) {
                /*dom为指定id（字符串），data为横纵轴的数据（[[x],[y]]）,title为插件的标题*/
                let myChart = echarts.init(document.getElementById(dom)); // 在指定节点处渲染
                myChart.setOption({
                    title: {text: title},
                    tooltip: {},
                    xAxis: {
                        data: data.x,//横轴数据（数组形式）
                    },
                    yAxis: {},
                    series: [
                        {
                            name: "金额/元",
                            type: "bar", //数据可视化展示类型
                            data: data.y,//纵轴数据（数组形式）
                        }
                    ]
                });
            },
            /*日期数据*/
            initData(year, month) {//渲染今年的数据
                /*清空原有数据*/
                this.pageData.returnMoney = {x: [], y: []};
                this.pageData.monthIn = {x: [], y: []};
                this.pageData.monthOut = {x: [], y: []};
                this.pageData.deskMonthIn = {x: [], y: []};
                this.pageData.proMonthOut = {x: [], y: []};
                this.pageData.monthType = {x: [], y: []};
                /*为年/月计算收支利润*/
                let date = new Date();
                let tagMonth;
                date.getFullYear().toString() === year.toString() ? tagMonth = date.getMonth() + 1 : tagMonth = 12;
                for (let i = 1; i <= parseInt(tagMonth); i++) {
                    let inMoney = this.moneyFilter(year, i, '收入', undefined)[0];
                    let outMoney = this.moneyFilter(year, i, '支出', undefined)[0];
                    let returnMoney = inMoney - outMoney;
                    this.pageData.monthIn.x.push(`${i}月`);
                    this.pageData.monthIn.y.push(inMoney);
                    this.pageData.monthOut.x.push(`${i}月`);
                    this.pageData.monthOut.y.push(outMoney);
                    this.pageData.returnMoney.x.push(`${i}月`);
                    this.pageData.returnMoney.y.push(returnMoney);
                }
                /*计算整年的餐桌供应商大类*/
                //桌子
                let shouruArr = this.moneyFilter(year, month, '收入', undefined)[1];
                for (let i = 1; i <= 8; i++) {//此处的阈值是最大的餐桌数字
                    let sum = 0;
                    shouruArr.filter(item => item.note === i.toString()).map(item => sum += item.money);
                    this.pageData.deskMonthIn.x.push(`${i}号桌`);
                    this.pageData.deskMonthIn.y.push(sum);
                }
                //供应商
                this.pageData.proMonthOut.x.push('张屠夫');
                this.pageData.proMonthOut.y.push(this.moneyFilter(year, month, '支出', '张屠夫')[0]);
                this.pageData.proMonthOut.x.push('李果农');
                this.pageData.proMonthOut.y.push(this.moneyFilter(year, month, '支出', '李果农')[0]);
                this.pageData.proMonthOut.x.push('王批发');
                this.pageData.proMonthOut.y.push(this.moneyFilter(year, month, '支出', '王批发')[0]);
                //大类
                this.pageData.monthType.x.push(...['堂客/入', '外卖/入', '其他/入', '供应商/出', '工资/出', '其他/出']);
                let [sum1, sum2] = [0, 0];
                this.pageData.deskMonthIn.y.map(i => sum1 += i);
                this.pageData.proMonthOut.y.map(i => sum2 += i);
                this.pageData.monthType.y.push(...[
                    sum1,
                    this.moneyFilter(year, month, '收入', '外卖')[0],
                    this.moneyFilter(year, month, '收入', '其他')[0],
                    sum2,
                    this.moneyFilter(year, month, '支出', '工资')[0],
                    this.moneyFilter(year, month, '支出', '其他')[0]]);
            },
            /*数据筛选,金额合计*/
            moneyFilter(year, month, type, note) {
                /*筛选数据*/
                let arr = new Array(...this.yapi);
                if (year) arr = arr.filter(item => item.year === year.toString());
                if (month) arr = arr.filter(item => item.month === month.toString());
                if (type) arr = arr.filter(item => item.type === type.toString());
                if (note) arr = arr.filter(item => item.note === note.toString());
                /*数据求和*/
                let sum = 0;
                arr.map(item => sum += item.money);
                return [sum, arr]
            },
            /*数据渲染*/
            dataShow(value) {
                let arr, year, month;
                if (value) {
                    year = value.split('-')[0];
                    month = parseInt(value.split('-')[1]).toString();
                } else {
                    let date = new Date();
                    year = date.getFullYear();
                    month = date.getMonth() + 1;
                }
                arr = [`${year}年每月利润`, `${year}年每月收入`, `${year}年每月支出`, `${year}年${month}月餐桌收入`, `${year}年${month}月供应商交易额`, `${year}年${month}月大类收支`];
                this.drawLine("lirun", this.pageData.returnMoney, arr[0]);
                this.drawLine("shouru", this.pageData.monthIn, arr[1]);
                this.drawLine("zhichu", this.pageData.monthOut, arr[2]);
                this.drawLine("canzhuo", this.pageData.deskMonthIn, arr[3]);
                this.drawLine("gongyingshang", this.pageData.proMonthOut, arr[4]);
                this.drawLine("shouzhidalei", this.pageData.monthType, arr[5]);
            }
        },
        watch: {
            /*监听数据改变*/
            checkedMonth(value) {
                if (value) {
                    let year = value.split('-')[0];
                    let month = parseInt(value.split('-')[1]).toString();
                    this.initData(year, month);
                    /*渲染数据-》执行*/
                    this.dataShow(value);
                } else {
                    let date = new Date();
                    this.initData(date.getFullYear(), date.getMonth() + 1);
                    /*渲染数据-》执行*/
                    this.dataShow();
                }
            },
        },
        /*创建后*/
        async created() {
            /*获取后台收入数据*/
            await axios({
                url: 'http://123.57.67.148:3000/mock/40/getInMoney',
                method: 'get'
            }).then(res => {
                if (res.data.code === '200') this.yapi.push(...res.data.data);
            });
            /*获取后台支出数据*/
            await axios({
                url: 'http://123.57.67.148:3000/mock/40/getOutMoney',
                method: 'get'
            }).then(res => {
                if (res.data.code === '200') this.yapi.push(...res.data.data);
            });
            /*初始赋值*/
            let date = new Date();
            this.initData(date.getFullYear(), date.getMonth() + 1);
            /*数据可视化插件渲染*/
            this.$nextTick(() => {
                /*渲染数据-》执行*/
                this.dataShow();
            });
        },
    };
</script>

<style scoped lang="less">
    .clear:after {
        content: '';
        clear: both;
        display: block;
    }

    #mxl_index {
        padding: 20px;
        position: relative;
        /*搜索框*/

        .m_search {
            position: absolute;
            top: 20px;
            right: 20px;
        }
    }

    /*数据可视化样式*/
    .chart {
        margin: 0 auto;
        width: 300px;
        height: 300px;
    }
</style>
